iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 17
1
Modern Web

從零開始進入 JavaScript & TypeScript 的世界系列 第 17

第17天-使用更高階的語法 forEach

  • 分享至 

  • xImage
  •  

forEach, 顧名思義,他就是 for each。與前面幾天介紹的不同之處就在於,map, reduce, 以及 filter 除了針對一個集合做操作之外,會把結果放到一個新的集合裡面,也就是會有回傳值。但是,雖然 forEach 也是針對一個集合做操作,但他不會有回傳值,就只是單純對他操作而已。

// 我們的測試資料
interface Student {
    name : string;
    height :number;
}

let students = [
    { name:"Love",    height : 164 },
    { name: "Andrew", height : 178 },
    { name: "Marie",  height : 165 },
    { name: "Faith",  height : 180 },
    { name: "Kayla",  height : 160 },
]

在開始介紹 forEach 之前,我們先來看看,如果要在 TypeScript 中使用 for 迴圈,可以怎麼做呢?

單純的 for 迴圈

單純的 for 迴圈相信前面看過很多次了,就是

// 語法
// for( 宣告index; 中止條件; 步進值) {
//     內容
// }

// 範例
for (let i = 0; i < students.length; i++){
    console.log(students[i]);
}

// 範例結果
// { name: 'Love', height: 164 }
// { name: 'Andrew', height: 178 }
// { name: 'Marie', height: 165 }
// { name: 'Faith', height: 180 }
// { name: 'Kayla', height: 160 }

for ... of

如果你沒有需要知道每個元素的 index 為何的話,使用 for ... of 會是一個很不錯的選擇,而且也可以避免不小心 Out of index 這個問題。

for ... of 是針對每一個在集合裡的元素,他的語法為:

// 語法
//for (let element in collection) {
//    // 內容
//}

// 範例
console.log("for .. of:");
for (let s of students) {
    console.log(s);
}

// 範例結果
// { name: 'Love', height: 164 }
// { name: 'Andrew', height: 178 }
// { name: 'Marie', height: 165 }
// { name: 'Faith', height: 180 }
// { name: 'Kayla', height: 160 }

for ... in

for .. of 不同的是,for ... of 拿取的是集合裡面的,而for..in拿的卻是集合裡的 indexkey,他的使用方式如下:

// 語法
// for (let index in collectino) {
//     內容
// }

// 範例
for (let s in students) {
    console.log(s);
}

// 範例結果
// 0
// 1
// 2
// 4
// 5
// 5

到這邊或許有人會覺的奇怪,那這樣看起來 for .. in 好像沒什麼用阿。沒錯,for .. in 在 Array 裡面看起來或許會怪怪的,但如果是其他類型的集合,就會變得很有道理了,例如 Map() ,他的 key 就不會像是 Array 這樣是有順序的數字了,這個我們會在之後在介紹。

forEach

forEach 的屬性比較接近前幾天介紹的 map, filter, 或 reduce,但與之不同的是,雖然他與他們一樣是對一個集合做操作,但 forEach 是沒有回傳值的。而相同的是一樣不用去跑迴圈,直接告訴 forEach 要做的事情即可。我們來看個範例吧!

// 語法
someArray.forEach(callback_function);

// 範例
students.forEach(console.log);
// 結果
// { name: 'Love', height: 164 }
// { name: 'Andrew', height: 178 }
// { name: 'Marie', height: 165 }
// { name: 'Faith', height: 180 }
// { name: 'Kayla', height: 160 }

上一篇
第16天-使用更高階的語法-filter
下一篇
第18天 - 比較
系列文
從零開始進入 JavaScript & TypeScript 的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言